<template>
    <section class="oragin-info intelligent-content-bg overflowYAll">
        <div class="intelligent-content-box">
            <el-form :inline="true" :model="organization" class=" origan-info-box" >
                <el-form-item >
                    <el-button v-hasPermission="'add'" type="primary"  @click="add">+ 新增</el-button>
                </el-form-item>
                <el-form-item >
                    <el-select  v-model="organization.type" placeholder="请选择">
                        <el-option
                          v-for="item in this.optionsLable"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-select  v-model="organization.nodeIds" placeholder="所属区域">
                        <el-option
                          v-for="item in this.nodeIdsLable"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-input  v-model="organization.name" placeholder="请输入资源名称">
                        <el-button icon="el-icon-search" slot="append" @click="onSubmit"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item >
                    <el-button  type="primary"  @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <table-diy
                @updata="updata"
                @detail="detail"
                :tableTitle="tableTitle"
                :tableData="tableData"
                :pageTotal="pageTotal"
                :organization="organization"
            >
            </table-diy>

            <el-dialog
              :title="titleDiy"
              :visible.sync="dialogVisible1"
              v-if="dialogVisible1"
              width="50%"
              class="diy-dialog"
              custom-class="diy-dialog"
              :append-to-body=true
            >
                <form-diy
                    :type="dialog1Type"
                    :objDetail="objDetail"
                    :content="currentPage"
                    :organization="organization"
                    :objid="detailObjid"
                    @fatherListSearch = "listSearchLater"
                    @disappear="disappear"
                    @tableDataSub="tableDataSub"
                >
                </form-diy>
            </el-dialog>
        </div>
    </section>
</template>

<script>
    import tableDiy from './components/tableDiy'
    import formDiy from './components/formDiy'
    import { organizationDataExchange,
             organizationDataExchangeListSearch,
             organizationListDisplay,
             organizationDataExchangeQuyu,
    } from '../api/data-exchange-api.js'

    export default {
        components:{
            tableDiy,
            formDiy
        },
        data() {
          return {
            currentPage:'yuanData',
            titleDiy:"",
            dialog1Type:'',
            pageTotal: 30,      //数据总条数
            dialogVisible1:false,
            detailObjid: 8,
            organization:{
                type: '',           //0是请求方，1是服务方，既是请求又是服务就不传这个type,type=''
                name: '',           //根据名称查询
                nodeIds: '',        //所属区域
                pageNum: 1,         //分页页数，从1开始
                pageSize: 10        //分页条数
            },
            tableTitle:{
                flowNum:"资源标识",
                oragion:'资源名称',
                type:"类型",
                area:"所属区域",
                state:"状态",
            },
            tableData:[
                    // {
                    //     code:"6666",
                    //     oragion:'测试名称',
                    //     type:"测试类型",
                    //     state:"是",
                    // },
            ],
            objDetail: {    //具体对象详细内容

            },
            optionsLable: [
                {
                    label: '请求方',
                    value: '0'
                },
                {
                    label: '服务方',
                    value: '1'
                },
                {
                    label: '选择全部',
                    value: ''
                },
            ],
            nodeIdsLable: [
                {
                    label: '联网服务子平台区域',
                    value: '30'
                },
                {
                    label: '公安网区域',
                    value: '29'
                },
            ],
          };
        },
        methods: {
            add(){
                this.titleDiy = '新增组织'
                this.dialog1Type = 'add';
                this.listSearch();
                this.dialogVisible1 = true;
            },
            updata(scope){/*更新*/
                this.titleDiy = '更新信息'
                this.dialog1Type = 'update';
                this.dialogVisible1 = true;
                this.detailObjid = scope.row.code
                this.objDetail = scope;
            },
            detail(scope){/*详情*/
                this.titleDiy = '查看详情'
                this.detailObjid = scope.row.code;
                this.dialog1Type = 'detail';
                this.dialogVisible1 = true;
              
            },
            onSubmit(){
                this.listSearch();
            },
            disappear(val){     //模态框消失
                this.dialogVisible1 = val;
            },
            tableDataSub(val){      //this.tableData列表的更新
                this.tableData = val;
            },
            listSearch(){       //组织信息查询
                organizationListDisplay(this.organization,this);
            },
            listSearchLater(){
                setTimeout(()=>{
                    this.listSearch();
                },2000);
            }
        },
        mounted(){
            console.log('资源信息列表');
            this.listSearch();
            organizationDataExchangeQuyu({}).then(res =>{   //查询区域
                this.nodeIdsLable = res.data.data.list;
                this.nodeIdsLable.push({
                    name: '选择所有区域',
                    id: ''
                })
            }).catch(error =>{
                console.log(error);
            });
        }
    };
</script>

<style scoped>
    .oragin-info{
        background:#f0f0f0;
    }
    .oragin-info .oragin-box{
        margin:10px;
        background: #fff;
        padding: 10px;
    }
    .oragin-info .el-dialog{
        position: relative;
        margin: 0px 0px 0px 50% !important;
        background: #fff;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0,0,0,.3);
        box-sizing: border-box;
        width: 50%;
        height: 100%;
    }
    .origan-info-box{
        float: left;
    }

    .info-box-add{
        position: absolute;
        left: 20px;
    }
    

    @keyframes dialog-fade-in {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}
</style>
